<template>
  <div class="loginBox">
    <div class="title">
      <span class="iconfont icon-left leftIcon" @click="goUpperStory()"></span>
      <p class="centerText">找回密码</p>
    </div>
    <div class="fromSty">
      <div class="passwordSty">
        <span>用户名:</span>
        <input class="inputSty" v-model="phone" placeholder="请输入邮箱/手机号" type="text" />
      </div>
      <div class="passwordSty">
        <span>密码:</span>
        <input class="inputSty" v-model="password" placeholder="密码" type="password" />
      </div>
      <div class="passwordSty">
        <span>重复密码:</span>
        <input class="inputSty" v-model="rePassword" placeholder="重复密码" type="password" />
      </div>
      <div class="passwordSty">
        <span>手机验证:</span>
        <input
          class="inputSty"
          v-model="phoneCode"
          type="text"
          style="width:30%"
          placeholder="获取验证码"
        />
        <input
          :disabled="enable"
          type="button"
          :value="verification_Info"
          :style="{color:enable?'#eee':'#000'}"
          @click="getCode()"
          style="width:30%;height:35px;background:#ccc;padding:1px;border-radius:5px;"
        />
      </div>
      <div>
        <van-button type="danger" block style="border-radius: 5px;" @click="retrievePassword()">重置密码</van-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data: () => ({
    enable: false,
    verification_Info: "获取验证码",
    num: 300,
    phone: null,
    password: null,
    rePassword: null,
    phoneCode: null
  }),
  mounted() {},
  methods: {
    goUpperStory() {
      this.$router.go(-1);
    },
    getCode() {
      //console.log(this.phone);
      if (this.phone) {
        let retu = this.phoneFun(this.phone);
        if (retu) {
          let data = {
            phone: this.phone,
            sendType: "con_smstype_forgetpassword"
          };
          this.$axios
            .register(`ym/public/member-send-verifycode`, data)
            .then(msg => {
              if (msg.status === 200 && msg.data.code === 0) {
                sessionStorage.setItem("phoneCode", msg.data.data.codeTest);
                this.$Notify({ type: "success", message: "验证码发送成功!" });
                this.enable = true;
                this.countDown();
              } else if (
                msg.status === 200 &&
                msg.data.code === 1 &&
                msg.data.data.residueSecond > 0
              ) {
                this.enable = true;
                this.num = msg.data.data.residueSecond;
                this.countDown();
                this.$Notify({ type: "warning", message: "验证码还在有效期!" });
              }
            });
        } else {
          this.$Notify({ type: "danger", message: "手机号格式不正确!" });
          return false;
        }
      } else {
        this.$Notify({ type: "danger", message: "请输入手机号!" });
      }
    },
    countDown() {
      let temp = setTimeout(this.countDown, 1000);
      this.num = this.num - 1;
      this.verification_Info = this.num + "秒后再试";
      if (this.num === 0) {
        // this.verifivationCode = false;
        this.num = 300;
        this.enable = false;
        this.verification_Info = "获取验证码";
        clearTimeout(temp);
      }
    },
    //手机号正则验证
    phoneFun(phones) {
      var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      if (!myreg.test(phones)) {
        return false;
      } else {
        return true;
      }
    },
    retrievePassword() {
      let userInfo = {
        phone: this.phone,
        password: this.password,
        rePassword: this.rePassword,
        phoneCode: this.phoneCode
      };
      this.$axios
        .register(`ym/public/member-forget-login-password`, userInfo)
        .then(msg => {
          if (msg.data.code === 0) {
            this.$Notify({ type: "success", message: msg.data.msg });
            setTimeout(() => {
              this.$router.push("/login");
            }, 2000);
          } else {
            this.$Notify({ type: "danger", message: msg.data.msg });
          }
        });
    }
  }
};
</script>
<style lang="scss">
.loginBox {
  height: 100vh;
  background: rgba(240, 240, 240);
  .title {
    border-bottom: 1px solid #ccc;
    .leftIcon {
      position: absolute;
      top: 15px;
      left: 10px;
    }
    .centerText {
      margin: 0;
      padding: 10px;
      text-align: center;
    }
  }
  .fromSty {
    div {
      margin: 15px 15px 28px 15px;
    }

    .inputSty {
      width: 65%;
      padding-left: 10px;
      outline: none;
      height: 32px;
      border-radius: 4px;
      border: 1px solid #ccc;
    }

    .userNameSty {
      color: #666;

      span {
        display: inline-block;
        text-align: left;
        width: 25%;
        margin: 0 10px;
      }
    }

    .passwordSty {
      color: #666;
      font-size: 14px;

      span {
        display: inline-block;
        text-align: left;
        width: 25%;
        margin: 0 5px 0 10px;
      }
    }
  }
  .loginAuto {
    position: relative;
    .checkbox {
      padding-left: 20px;
    }
    .rightLink {
      position: absolute;
      right: 20px;
      top: 0;
    }
  }
  .bottomlink {
    margin-top: 40px;
    p {
      text-align: center;
      color: #666;
      font-size: 14px;
    }
  }
}

::-webkit-input-placeholder {
  /* Chrome/Opera/Safari */
  color: #999;
  font-size: 14px;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: #999;
  font-size: 14px;
}

:-ms-input-placeholder {
  /* IE 10+ */
  color: #999;
  font-size: 14px;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: #999;
  font-size: 14px;
}
</style>